import React, { PropTypes, Component } from 'react'
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';


const styles = {
  customWidth: {
    width: 500,
  },
  imgWidth:{
    width:400
  }

}

class WidgetSwiper extends Component {
 constructor(props, context) {
    super(props, context)
    this.state={
      activeId:1,
      activeName:'初始轮播',
      swiperList:[
      {
        id:1,
        name:'轮播一',
        src:'http://hbimg.b0.upaiyun.com/507c1a17c6190232ded26643aa09ae771910bcb66f36f-LqvmMc_fw658'
      },
      {id:2,
        name:'轮播二',
        src:'http://hbimg.b0.upaiyun.com/6298e5ed458d5b74f45f52b0a12f150d5c8b66ff7cb4e-DcjQqo_fw236'
      }],
      widgetStyle:{
        backgroundImage:''
      }
    }

  }
 handleChange (event, index, value) {
  console.log(value)
  let newStyle={
      backgroundImage:`url(${value})`,
      backgroundSize:'100% 100%'
  }
  let arrIndex=index-1
  // this.state.swiperList.map((item)=>{
  //  return  item.id===vale:
  // })
  // let activeName=this.state.swiperList[arrIndex].name||'获取名称失败'
  // this.setState({widgetStyle:newStyle,activeId:arrIndex,activeName:activeName})
  this.setState({widgetStyle:newStyle})
   
} 

 
  render() {
    let { widget}=this.props
    return (
      
      <div style={widget.conStyles} key={widget.positionId} 
                > 
        <div className="widget-wrap" style={this.state.widgetStyle}>
        <div className="theme-choose" style={{height:400}}>
           <DropDownMenu
              value={this.state.activeName}
              onChange={this.handleChange.bind(this)}
              style={styles.customWidth}
              autoWidth={false}
          >
          {this.state.swiperList.map((item)=>{
            return (
              <MenuItem key={item.id} value={item.id} primaryText={item.name} >
              <img style={styles.imgWidth} src={item.src} />
          </MenuItem>
              )
          })}
          
          
        </DropDownMenu>
        </div> 
       
      </div>
           
            
       </div>
        
    )
  }
}

WidgetSwiper.propTypes = {
  widget:PropTypes.object,
  handleWidgetMenuShow:PropTypes.func
}

export default WidgetSwiper
